<template>
  <div
    class="Playback"
    @mouseenter="MouseEnterPlayback"
    @mouseleave="MouseLeavePlayback"
  >
    <span
      class="Playback-lock"
      @click="Playbacklock"
      @mouseenter="HoverPlaybacklock"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        v-if="Is_FixedFooter"
      >
        <path
          fill="#ffffff"
          d="M757.810429 373.751333 325.645708 373.751333l0-83.895759c0-103.694687 81.507362-184.922686 185.559183-184.922686 78.121242 0 146.053424 46.74565 173.062568 119.090329 3.865028 10.352789 15.384385 15.609513 25.742291 11.746532 10.351766-3.866051 15.609513-15.390525 11.744485-25.742291C688.844707 121.877815 606.198405 64.918545 511.204891 64.918545c-61.918211 0-119.246895 23.662933-161.423483 66.63156-41.3692 42.142819-64.151066 98.363262-64.151066 158.305469l0 83.895759-20.007683 0c-60.774155 0-110.042255 49.267077-110.042255 110.042255l0 366.139981c0 60.774155 49.267077 110.042255 110.042255 110.042255l492.187769 0c60.775178 0 110.042255-49.267077 110.042255-110.042255L867.852684 483.793588C867.852684 423.01841 818.585607 373.751333 757.810429 373.751333zM827.837318 849.933569c0 38.674834-31.352055 70.02689-70.02689 70.02689L265.62266 919.960459c-38.674834 0-70.02689-31.352055-70.02689-70.02689L195.59577 483.793588c0-38.674834 31.352055-70.02689 70.02689-70.02689l492.187769 0c38.674834 0 70.02689 31.352055 70.02689 70.02689L827.837318 849.933569z"
        />
        <path
          fill="#ffffff"
          d="M509.715981 583.832002c-11.048637 0-20.007683 8.959046-20.007683 20.007683l0 110.042255c0 11.048637 8.958022 20.007683 20.007683 20.007683s20.007683-8.958022 20.007683-20.007683L529.723663 603.839685C529.723663 592.790024 520.765641 583.832002 509.715981 583.832002z"
        />
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        v-else
      >
        <path
          fill="#ffffff"
          d="M753.845117 371.674021l-17.46272 0 0-83.669608c0-59.275012-22.62837-115.203812-63.715137-157.482731-42.170448-43.394323-99.369172-67.291592-161.058163-67.291592-126.040624 0-224.772276 98.731652-224.772276 224.7733l0 83.669608-16.680914 0c-62.788022 0-113.688295 50.900274-113.688295 113.688295L156.467611 842.961784c0 62.788022 50.900274 113.688295 113.688295 113.688295l483.690234 0c62.788022 0 113.688295-50.900274 113.688295-113.688295L867.534436 485.362316C867.532389 422.574295 816.633139 371.674021 753.845117 371.674021zM328.176344 288.005436c0-102.858646 80.573083-183.432753 183.431729-183.432753 50.423413 0 97.093339 19.447934 131.410935 54.762231 33.547047 34.519188 52.021817 80.214926 52.021817 128.670521l0 83.669608L328.176344 371.675044 328.176344 288.005436zM826.191842 842.961784c0 39.956014-32.390711 72.346725-72.346725 72.346725L270.154883 915.308509c-39.956014 0-72.346725-32.390711-72.346725-72.346725L197.808158 485.362316c0-39.956014 32.390711-72.346725 72.346725-72.346725l483.690234 0c39.956014 0 72.346725 32.390711 72.346725 72.346725L826.191842 842.961784z"
        />
        <path
          fill="#ffffff"
          d="M509.932921 580.446905c-11.416004 0-20.670785 9.254781-20.670785 20.670785l0 109.554138c0 11.414981 9.254781 20.670785 20.670785 20.670785 11.416004 0 20.670785-9.254781 20.670785-20.670785L530.603707 601.116667C530.602683 589.701686 521.348925 580.446905 509.932921 580.446905z"
        />
      </svg>
    </span>
    <div class="PlaybackControl" ref="PlaybackControlRef">
      <div class="PlaybackControl__container" @mouseleave="MouseLeavePlayback">
        <div class="PlaybackControl__container__PlaybackArea">
          <div class="PlaybackControl__container__PlaybackArea__content">
            <div
              class="PlaybackControl__container__PlaybackArea__content__ImgBox"
              ref="ImgPlayListBox"
            >
              <img
                :src="bgcImg"
                alt=""
                :style="`transform:rotate(${TransformRotale}deg)`"
              />
            </div>
            <div
              class="PlaybackControl__container__PlaybackArea__content__contentName"
            >
              <div
                class="PlaybackControl__container__PlaybackArea__content__contentName-name"
              >
                {{
                  oneMusicPlayData[0] == undefined
                    ? ""
                    : oneMusicPlayData[0].name
                }}
              </div>
              <div
                class="PlaybackControl__container__PlaybackArea__content__contentName-aliasName"
              >
                {{
                  oneMusicPlayData[0] == undefined
                    ? ""
                    : oneMusicPlayData[0].ar[0].name
                }}
              </div>
            </div>
          </div>
          <div class="PlaybackControl__container__PlaybackArea__Control">
            <!-- <span
            class="PlaybackControl__container__PlaybackArea__Control--active"
          ></span>
          <span v-for="(item, index) in 23" :key="index"></span> -->
            <div
              class="PlaybackControl__container__PlaybackArea__Control__playprogrebox"
            >
              <div
                class="PlaybackControl__container__PlaybackArea__Control__playprogrebox__progress"
              >
                <div ref="ProgressRef">
                  <div
                    class="PlaybackControl__container__PlaybackArea__Control__playprogrebox__progress-gressBox"
                  >
                    <div class="gressCon" ref="proGressRef"></div>
                    <div class="gressCircle" ref="gressCircleRef">
                      <span
                        class="gressCircle—Time"
                        v-show="Is_Show_gressCircleTime"
                        >{{ gressCircleTime | playTime }}</span
                      >
                    </div>
                    <div
                      class="gressTras"
                      @mousedown="changeProgress"
                      @click.stop.prevent=""
                    ></div>
                  </div>
                </div>
              </div>
              <!-- 時間 -->
              <div
                class="PlaybackControl__container__PlaybackArea__Control__playprogrebox__time"
              >
                <span
                  class="PlaybackControl__container__PlaybackArea__Control__playprogrebox__time--active"
                  >{{ currentTime | playTime }}</span
                ><span>{{ tagetTime | playTime }}</span>
              </div>
            </div>
            <div
              class="PlaybackControl__container__PlaybackArea__Control__Player"
            >
              <span class="Control_Player_span">
                <img src="../../assets/image/icon/shoucang_1.png" alt="" />
              </span>
              <span class="Control_Player_span" @click="autoPlayPrevious">
                <img src="../../assets/image/icon/48shangyishou.png" alt="" />
              </span>
              <span class="Control_Player_span" @click="clickPlay">
                <img
                  :src="
                    this.$store.state.musicState.isClickPlay
                      ? require('../../assets/image/icon/24gf-pauseCircle.png')
                      : require('../../assets/image/icon/24gf-playCircle.png')
                  "
                  alt=""
                />
              </span>
              <span class="Control_Player_span" @click="autoPlayNext">
                <img src="../../assets/image/icon/49xiayishou.png" alt="" />
              </span>
              <span
                class="Control_Player_span Control_Player_span_lyric"
                @click="Is_LyricShowChange"
              >
                <span>歌词</span>
                <img src="../../assets/image/icon/liebiao.png" alt="" />
                <Lyric v-if="Is_LyricShow" />
              </span>
              <div
                class="PlaybackControl__container__PlaybackArea__Control__Player-listDetails"
              >
                <span
                  class="Control__Player-listDetails_span Control__Player-listDetails_span_volumeGress"
                >
                  <img src="../../assets/image/icon/yinliang.png" alt="" />
                  <div class="volumeGress">
                    <el-slider
                      v-model="volumeValues"
                      vertical
                      height="100px"
                      @input="volumeGressChange"
                    >
                    </el-slider>
                  </div>
                </span>
                <span
                  class="Control__Player-listDetails_span Control__Player-listDetails_span_xiazai"
                  @click="downloadMusic"
                >
                  <span>下载</span>
                  <img src="../../assets/image/icon/xiazai.png" alt="" />
                  <DownLoad ref="mychild" />
                </span>
                <span
                  class="Control__Player-listDetails_span Control__Player-listDetails_span_SongList"
                  @click="isShowMusicPList"
                >
                  <span>歌单播放列表</span>
                  <img src="../../assets/image/icon/bofangliebiao.png" alt="" />
                  <MusicPlayList
                    class="Control__Player-listDetails_span_SongList-position"
                    v-if="isMusicPlayList"
                  />
                </span>
              </div>
              <div
                class="PlaybackControl__container__PlaybackArea__Control__Player-listDetails Control__Player_PlayOrder"
              >
                <span
                  class="Control__Player-listDetails_span Control__Player-listDetails_span_LoopPlayback"
                  :class="{
                    LoopPlaybackActive:
                      LoopPlayOrder === '' || LoopPlayOrder === '0',
                  }"
                  @click="LoopPlayback('0')"
                >
                  <span>循环播放</span>
                  <!-- <img src="../../assets/image/icon/24gl-repeat2.png" alt="" /> -->
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                  >
                    <path
                      d="M192 789.333333a21.24 21.24 0 0 1-12.8-4.28 344.513333 344.513333 0 0 1-99.333333-118A341.246667 341.246667 0 0 1 384 170.666667h256q6.36 0 12.733333 0.233333l-49.153333-49.146667a21.333333 21.333333 0 0 1 30.173333-30.173333l85.333334 85.333333a21.333333 21.333333 0 0 1 0 30.173334l-85.333334 85.333333a21.333333 21.333333 0 0 1-30.173333-30.173333l48.666667-48.666667Q646.126667 213.333333 640 213.333333H384c-164.666667 0-298.666667 134-298.666667 298.666667 0 94.833333 43.546667 181.933333 119.48 238.966667A21.333333 21.333333 0 0 1 192 789.333333z m228.433333 143.06a21.333333 21.333333 0 0 0 0-30.173333l-49.153333-49.146667q6.366667 0.233333 12.733333 0.233334H640a341.46 341.46 0 0 0 304.146667-496.42 344.513333 344.513333 0 0 0-99.333334-118 21.333333 21.333333 0 1 0-25.626666 34.113333C895.12 330.066667 938.666667 417.166667 938.666667 512c0 164.666667-134 298.666667-298.666667 298.666667H384q-6.12 0-12.246667-0.246667l48.666667-48.666667a21.333333 21.333333 0 0 0-30.173333-30.173333l-85.333334 85.333333a21.333333 21.333333 0 0 0 0 30.173334l85.333334 85.333333a21.333333 21.333333 0 0 0 30.173333 0z"
                    />
                  </svg>
                </span>
                <span
                  class="Control__Player-listDetails_span Control__Player-listDetails_span_LoopPlayback"
                  :class="{ LoopPlaybackActive: LoopPlayOrder === '1' }"
                  @click="LoopPlayback('1')"
                >
                  <span>单曲循环</span>
                  <!-- <img
                    src="../../assets/image/icon/24gl-repeatOnce2.png"
                    alt=""
                  /> -->
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                  >
                    <path
                      d="M192 789.333333a21.24 21.24 0 0 1-12.8-4.28 344.513333 344.513333 0 0 1-99.333333-118A341.246667 341.246667 0 0 1 384 170.666667h256q6.36 0 12.733333 0.233333l-49.153333-49.146667a21.333333 21.333333 0 0 1 30.173333-30.173333l85.333334 85.333333a21.333333 21.333333 0 0 1 0 30.173334l-85.333334 85.333333a21.333333 21.333333 0 0 1-30.173333-30.173333l48.666667-48.666667Q646.126667 213.333333 640 213.333333H384c-164.666667 0-298.666667 134-298.666667 298.666667 0 94.833333 43.546667 181.933333 119.48 238.966667A21.333333 21.333333 0 0 1 192 789.333333z m228.433333 143.06a21.333333 21.333333 0 0 0 0-30.173333l-49.153333-49.146667q6.366667 0.233333 12.733333 0.233334H640a341.46 341.46 0 0 0 304.146667-496.42 344.513333 344.513333 0 0 0-99.333334-118 21.333333 21.333333 0 1 0-25.626666 34.113333C895.12 330.066667 938.666667 417.166667 938.666667 512c0 164.666667-134 298.666667-298.666667 298.666667H384q-6.12 0-12.246667-0.246667l48.666667-48.666667a21.333333 21.333333 0 0 0-30.173333-30.173333l-85.333334 85.333333a21.333333 21.333333 0 0 0 0 30.173334l85.333334 85.333333a21.333333 21.333333 0 0 0 30.173333 0zM554.666667 618.666667V405.333333a21.333333 21.333333 0 0 0-21.333334-21.333333h-42.666666a21.333333 21.333333 0 0 0 0 42.666667h21.333333v192a21.333333 21.333333 0 0 0 42.666667 0z"
                    />
                  </svg>
                </span>
                <span
                  class="Control__Player-listDetails_span Control__Player-listDetails_span_LoopPlayback"
                  :class="{ LoopPlaybackActive: LoopPlayOrder === '2' }"
                  @click="LoopPlayback('2')"
                >
                  <span>随机播放</span>
                  <!-- <img src="../../assets/image/icon/suijibofang.png" alt="" /> -->
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                  >
                    <path
                      d="M500.6 599.8c19.7 24.5 41.5 47.7 67.1 67.9 56.4 44.5 122.9 67.1 203.1 69.1L744 763.5c-14.1 14.1-14.1 36.9 0 50.9 7 7 16.2 10.5 25.5 10.5s18.4-3.5 25.5-10.5l84-84c7.4-7.4 10.9-17.2 10.5-26.9 2.9-11.8-0.3-24.8-9.5-34l-84-84c-14.1-14.1-36.9-14.1-50.9 0s-14.1 36.9 0 50.9l28.4 28.4c-117.4-2.6-177.1-56.5-230-127.1-7.2 10.2-14.4 20.8-21.9 31.6-6.9 10.2-13.9 20.3-21 30.5zM382.8 339.6C323.4 292.8 252.6 270 166.5 270c-19.9 0-36 16.1-36 36s16.1 36 36 36c145.4 0 205.2 75 267.8 165.5 14.2-20.7 28.7-41.8 44.3-62.2-27.2-38.1-57.2-75.3-95.8-105.7zM891.5 338.4c0.4-9.7-3.1-19.5-10.5-26.9l-84-84c-14.1-14.1-36.9-14.1-50.9 0-14.1 14.1-14.1 36.9 0 50.9l26.7 26.7c-80.2 2-146.7 24.7-203.1 69.1-51.1 40.3-87.1 92.7-121.8 143.4C380.7 615.5 322.8 700 168.5 700c-19.9 0-36 16.1-36 36s16.1 36 36 36c86.1 0 156.9-22.8 216.3-69.6 51.4-40.5 87.5-93.1 122.4-144 65.5-95.4 122.2-178.1 268.2-181.3L747 405.5c-14.1 14.1-14.1 36.9 0 50.9 7 7 16.2 10.5 25.5 10.5s18.4-3.5 25.5-10.5l84-84c9.2-9.2 12.4-22.2 9.5-34z"
                    />
                  </svg>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MusicPlayList from "./MusicPlayList.vue";
import DownLoad from "@/components/publicCompontents/DownLoad";
import Lyric from "../main/Lyric";
import {
  getMusicDetailInfo,
  getURLInfo,
  getMusicLyricInfo,
} from "@/Api/seachApi.js";

export default {
  name: "PlayList",
  components: {
    MusicPlayList,
    DownLoad,
    Lyric,
  },

  data() {
    return {
      //播放顺序
      playOrder: [
        { src: require("../../assets/image/icon/suijibofang.png") },
        { src: require("../../assets/image/icon/danquxunhuan.png") },
      ],

      // 播放进度条值
      progressValue: 0,
      // 音量控制
      volumeValues: 20,

      // 下载的歌曲名字
      musicDownLoadName: "",

      // 显示播放列表页面
      isMuPlList: false,

      // 总时间
      durationTime: 0,
      // 圆点的移动时的时间显示
      Is_Show_gressCircleTime: false,
      // 圆点移动时的时间内容
      gressCircleTime: 0,
      // 进入默认会自动隐藏的Timer
      IshiddenDefaultTimer: null,
      // 判断footer是否固定
      Is_FixedFooter: false,
      // 判断footer是否被hover显示
      Is_HoverFooter: true,
      TransformRotale: 0,
      TransformRotaleTimer: null,
      TransformRotaleIndex: 0,
      // 是否显示歌词
      Is_LyricShow: false,
    };
  },

  computed: {
    isMusicPlayList() {
      return this.$store.state.musicState.isMusicPlayList;
    },
    // 获取audio标签
    getAudioElement() {
      return this.$store.state.musicState.audioElement;
    },
    // 歌曲ID
    musicID() {
      return this.$store.state.musicState.musicID;
    },
    // 圖片
    bgcImg() {
      return this.$store.state.musicState.bgcImg;
    },
    // 当前播放时间
    currentTime() {
      return this.$store.state.musicState.currentTime;
    },
    // 总播放时间
    tagetTime() {
      return this.$store.state.musicState.tagetTime;
    },
    //   单首歌曲列表详情
    oneMusicPlayData() {
      return this.$store.state.musicState.oneMusicPlayData;
    },

    // 图片旋转的角度
    AnimationPlayRotale() {
      return this.$store.state.PlayState.animationPlayRotale;
    },
    // 判断歌曲是否结束
    Is_Audio_Ended() {
      return this.$store.state.PlayState.Is_Audio_Ended;
    },
    // 获取audio路径
    audioSrc() {
      return this.$store.state.musicState.audioSrc;
    },
    // 是否播放
    IsClickPlayAuto() {
      return this.$store.state.musicState.isClickPlay;
    },
    // 歌曲播放顺序
    LoopPlayOrder() {
      return this.$store.state.musicState.LoopPlayOrder;
    },
  },
  created() {
    this.TransformRotale = this.$store.state.PlayState.animationPlayRotale;
  },
  mounted() {
    this.DefaultHidden();
    this.PlayListProgress();
    this.ListenerProgress();
    if (this.IsClickPlayAuto) {
      this.getTransformRotale(this.AnimationPlayRotale);
    }
  },
  beforeDestroy() {
    this.$store.commit("PlayState/SET_ANIMATION_ROTALE", this.TransformRotale);
    clearTimeout(this.IshiddenDefaultTimer);
  },
  methods: {
    // 循环播放的顺序
    LoopPlayback(val) {
      this.$store.dispatch("musicState/Set_LoopPlayOrder", val);
    },

    // 鼠標進入开启
    MouseEnterPlayback(e) {
      if (!this.Is_FixedFooter) {
        throttle(this.enterPlayBack, 200)();
        function throttle(func, wait) {
          var timer = null;
          var startTime = Date.now();
          return function () {
            var curTime = Date.now();
            var remaining = wait - (curTime - startTime);
            var context = this;
            var args = arguments;
            clearTimeout(timer);
            if (remaining <= 0) {
              func.apply(context, args);
              startTime = Date.now();
            } else {
              timer = setTimeout(func, remaining); // 如果小于wait 保证在差值时间后执行
            }
          };
        }
      }
    },
    enterPlayBack() {
      let PlaybackControlRef = this.$refs.PlaybackControlRef;
      this.Is_HoverFooter = true;
      this.$store.commit("PlayState/SET_HOMEBP", true);
      PlaybackControlRef.style.transition = `all 0.3s`;
      PlaybackControlRef.style.bottom = `${5}px`;
      PlaybackControlRef.style.visibility = "visible";
    },
    // 鼠标退出关闭
    MouseLeavePlayback() {
      if (!this.Is_FixedFooter) {
        let PlaybackControlRef = this.$refs.PlaybackControlRef;
        this.Is_HoverFooter = false;
        this.$store.commit("PlayState/SET_HOMEBP", false);
        this.Is_LyricShow = false;
        this.$store.commit("musicState/isMusicPlayList", false);
        this.isMuPlList = false;
        PlaybackControlRef.style.transition = `all 1s`;
        PlaybackControlRef.style.bottom = `${-120}px`;
        PlaybackControlRef.style.visibility = "hidden";
      }
    },
    // 节流
    throttle(fn, delay) {
      let curTime = Date.now();
      return () => {
        let context = this,
          args = arguments,
          nowTime = Date.now();
        if (nowTime - curTime >= delay) {
          curTime = Date.now();
          return fn.apply(context, args);
        }
      };
    },

    // 固定footer
    Playbacklock() {
      this.Is_FixedFooter = !this.Is_FixedFooter;
      if (this.Is_FixedFooter) {
        let PlaybackControlRef = this.$refs.PlaybackControlRef;
        PlaybackControlRef.style.bottom = `${5}px`;
      }
    },
    // 悬浮显示footer
    HoverPlaybacklock() {
      clearTimeout(this.IshiddenDefaultTimer);
      let PlaybackControlRef = this.$refs.PlaybackControlRef;
      this.Is_HoverFooter = true;
      PlaybackControlRef.style.transition = `all 0.3s`;
      PlaybackControlRef.style.bottom = `${5}px`;
      PlaybackControlRef.style.visibility = "visible";
    },
    // 播放上一首
    autoPlayPrevious() {
      this.$store.dispatch("musicState/Get_Prev_Player", this.musicID);
    },
    // 自动播放下一首
    autoPlayNext() {
      this.$store.dispatch("musicState/Get_Next_Player", this.musicID);
    },
    // 播放进度条
    PlayListProgress() {
      // // 获取播放进度条标签
      let proGressRef = this.$refs.proGressRef;
      // 播放进度条
      this.progressValue = parseFloat(
        this.currentTime *
          (proGressRef.parentElement.offsetWidth / this.tagetTime).toFixed(3)
      );
      proGressRef.style.width = this.progressValue + "px";
      this.$refs.gressCircleRef.style.left =
        (
          this.progressValue -
          this.$refs.gressCircleRef.style.width / 2 -
          8
        ).toFixed(3) + "px";
    },
    // 改变进度条
    changeProgress(e) {
      // 获取播放进度条标签
      if (e.target.className == "gressTras") {
        let ProgressRef = this.$refs.ProgressRef; //父-父元素
        let ClientRects = ProgressRef.getClientRects()[0];
        if (e.target.className == "gressTras") {
          clearInterval(this.TransformRotaleTimer);
          let ClientLeft = ClientRects.left; //进度条距离窗口的距离
          let ClientWidth = ClientRects.width; //进度条的宽度
          let currentTime =
            (e.pageX - ClientLeft) / (ClientWidth / this.tagetTime);

          this.getAudioElement.currentTime = currentTime;
          this.$store.commit("musicState/isClickPlay", true);
          this.$store.commit("PlayState/SET_Is_Audio_Ended", false);
          this.getTransformRotale(this.TransformRotale);
          this.getAudioElement.play();
        }
      }
    },
    // 进度条圆点移动
    ListenerProgress(e) {
      let ProgressRef = this.$refs.ProgressRef; //父-父元素
      let proGressRef = this.$refs.proGressRef;
      let gressCircleRef = this.$refs.gressCircleRef;
      let that = this;
      gressCircleRef.onmousedown = function (event) {
        event = event || window.event;

        let ClientRects = ProgressRef.getClientRects()[0];
        // //获取圆点偏移量
        let gressCircleDownLeft = event.clientX - this.offsetLeft;
        that.gressCircleTime = that.currentTime;
        that.Is_Show_gressCircleTime = true;
        // 为右侧圆点绑定拖动事件
        document.onmousemove = function (event) {
          event = event || window.event;
          // 获取鼠标坐标
          let gressCircleWidth = event.clientX - gressCircleDownLeft;
          let gressCircleLeft = gressCircleWidth - 8.3;
          // 判断是否超出范围
          if (gressCircleLeft <= 0) {
            gressCircleLeft = 0 - 8.3;
            gressCircleWidth = 0;
          } else if (gressCircleWidth >= ClientRects.width) {
            gressCircleLeft = ClientRects.width - 8.3;
            gressCircleWidth = ClientRects.width;
          }

          // 设置抓住圆点拖动时的时间显示
          let MoveGressCircleTimeTime =
            (event.clientX - ClientRects.left) /
            (ClientRects.width / that.tagetTime);
          if (MoveGressCircleTimeTime <= 0) {
            that.gressCircleTime = 0;
          } else if (MoveGressCircleTimeTime >= that.tagetTime) {
            that.gressCircleTime = that.tagetTime;
          } else {
            that.gressCircleTime = MoveGressCircleTimeTime;
          }
          gressCircleRef.style.left = gressCircleLeft + "px";
          proGressRef.style.width = gressCircleWidth + "px";
        };

        // 为右侧圆点绑定鼠标抬起事件
        document.onmouseup = function (event) {
          event = event || window.event;
          // 取消鼠标移动事件
          document.onmousemove = null;
          // 取消鼠标抬起事件
          document.onmouseup = null;
          that.Is_Show_gressCircleTime = false;
          that.getAudioElement.currentTime = that.gressCircleTime;
          that.$store.commit("musicState/isClickPlay", true);
          that.$store.commit("PlayState/SET_Is_Audio_Ended", false);
          clearInterval(that.TransformRotaleTimer);
          that.getTransformRotale(that.TransformRotale);
          that.getAudioElement.play();
        };
        //取消浏览器对拖拽内容进行搜索的默认行为
        return false;
      };
    },

    // 音量改变
    volumeGressChange() {
      this.$nextTick(() => {
        this.getAudioElement.volume =
          this.volumeValues / 100 > 0 ? this.volumeValues / 100 : 20 / 100;
      });
    },

    getTransformRotale(val) {
      this.TransformRotaleIndex = val;
      this.TransformRotaleTimer = null;
      clearInterval(this.TransformRotaleTimer);
      this.TransformRotaleTimer = setInterval(() => {
        this.TransformRotaleIndex++;
        this.TransformRotale = this.TransformRotaleIndex;
        if (this.TransformRotaleIndex >= 360) {
          this.TransformRotaleIndex = 0;
          clearInterval(this.TransformRotaleTimer);
          this.getTransformRotale(0);
        }
      }, 27.78);
    },
    // 点击播放或暂停
    clickPlay() {
      if (!this.getAudioElement) {
        return;
      }
      this.$nextTick(() => {
        if (this.getAudioElement.readyState == 4) {
          let playAuto = !this.IsClickPlayAuto;
          if (playAuto) {
            this.$store.commit("musicState/isClickPlay", true);
            this.$store.commit("musicState/SetMusicPlayListData", this.musicID);
            this.$store.commit("PlayState/SET_Is_Audio_Ended", false);
            // setTimeout(() => {
            this.getAudioElement.play();
            this.getTransformRotale(this.TransformRotale);
            // }, 300);
          } else {
            this.$store.commit("musicState/isClickPlay", false);
            this.getAudioElement.pause();
            clearInterval(this.TransformRotaleTimer);
            this.$store.commit(
              "PlayState/SET_ANIMATION_ROTALE",
              this.TransformRotale
            );
          }
        } else {
          this.$store.commit("musicState/isClickPlay", false);
          this.getAudioElement.pause();
        }
      });
    },

    // 显示播放列表页面
    isShowMusicPList() {
      this.isMuPlList = !this.isMuPlList;
      this.$store.commit("musicState/isMusicPlayList", this.isMuPlList);
    },
    // 控制歌词是否显示
    Is_LyricShowChange() {
      this.Is_LyricShow = !this.Is_LyricShow;
    },

    // 下载音乐
    downloadMusic() {
      if (this.audioSrc) {
        this.$nextTick(() => {
          //  因为数据只有一条，则无需[0]
          this.$refs.mychild.downLoad(
            this.musicID,
            this.oneMusicPlayData[0].name
          );
        });
      }
    },
    // 进来footer 10秒后默认隐藏
    DefaultHidden() {
      this.MouseEnterPlayback();
      this.IshiddenDefaultTimer = setTimeout(() => {
        this.MouseLeavePlayback();
        clearTimeout(this.IshiddenDefaultTimer);
      }, 10000);
    },
  },
  watch: {
    currentTime: function (newVal) {
      this.PlayListProgress();
    },
    AnimationPlayRotale: function (newVal) {
      this.TransformRotale = newVal;
    },

    // 监听是否播放-用于从其他页面点击歌曲进行播放
    audioSrc(newVal, oldVal) {
      if (newVal !== oldVal && oldVal !== "") {
        let timer = null;
        clearInterval(this.TransformRotaleTimer);
        this.$store.commit("musicState/isClickPlay", false);
        this.TransformRotale = 0;
        this.$store.commit("PlayState/SET_ANIMATION_ROTALE", 0);
        timer = setTimeout(() => {
          this.getTransformRotale(0);
          this.$store.commit("musicState/isClickPlay", true);
          this.getAudioElement.play();
          clearTimeout(timer);
        }, 500);
      }
    },
    // 判断歌曲是否播放完成并结束
    Is_Audio_Ended(newVal) {
      if (newVal) {
        console.log("jiesshu");
        clearInterval(this.TransformRotaleTimer);
        this.$store.commit("PlayState/SET_ANIMATION_ROTALE", 0);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Playback {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.3);

  .Playback-lock {
    position: absolute;
    right: 110px;
    top: -35px;
    // border: 1px solid #cccccc;
    padding: 5px 10px 0 10px;
    display: inline-block;
    font-size: 26px;
    background-color: rgba(255, 255, 255, 0.3);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    z-index: 101;

    &:hover {
      cursor: pointer;
    }
  }
}
// 隐藏样式
// .HiddenPlaybackControl {
//   position: absolute;
//   bottom: 0 !important;
//   left: 0;
//   width: 100%;
//   height: 10px !important;
//   background-color: rgba(255, 255, 255, 0.3);

//   box-sizing: border-box;
//   .PlaybackControl__container {
//     display: none;
//   }
// }
.PlaybackControl {
  position: fixed;
  bottom: -120px;
  left: 0;
  // bottom: 100px;
  width: 100%;
  // height: 100%;
  height: 150px;

  padding: 10px 134px 0 154px;
  // border: 1px solid red;
  box-sizing: border-box;
  .PlaybackControl__container {
    // position: absolute;
    // top: calc(50% - 300px);
    // left: calc(50% - 450px);
    width: 100%;
    // min-height: 450px;
    height: 100%;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 60px;
    box-sizing: border-box;
    /* 模糊大小就是靠的blur这个函数中的数值大小 */
    backdrop-filter: blur(30px);

    &__PlaybackArea {
      position: relative;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      // 歌名
      &__content {
        position: absolute;
        left: calc(20% - 288px);
        height: 100%;
        box-sizing: border-box;
        display: flex;
        // justify-content: center;
        align-items: center;

        // 旋转图片
        &__ImgBox {
          // position: absolute;
          // left: 40px;
          // top: calc(50% - 168px);
          height: 92px;
          width: 92px;
          border-radius: 50%;
          margin-left: 80px;
          border: 5px solid rgba(171, 192, 210, 0.5);
          background-color: bisque;

          img {
            border-radius: 50%;
            transform-origin: center center;
          }
        }
        &__contentName {
          margin-left: 20px;

          &-name,
          &-aliasName {
            text-align: right;
            font-size: 20px;
            margin-bottom: 10px;
            color: rgba(255, 255, 255, 0.3);
          }
          &-name {
            text-align: left;
            font-size: 30px;
            color: #fff;
            font-weight: bold;
          }
        }
      }

      // 进度条
      &__Control {
        position: absolute;
        left: calc(50% - 348px);
        // top: calc(50% - 168px);
        margin: 10px 0;
        padding: 20px 0;
        display: flex;
        flex-direction: column;

        &__playprogrebox {
          // // text-align: center;
          // width: 900px;
          min-width: 600px;

          width: 32vw;
          display: flex;
          // min-width: 900px;
          // flex: 6;
          font-size: 20px;
          font-weight: bold;
          color: #fff;
          padding: 0 10px;
          &__progress {
            width: 100%;
            height: 100%;
            &-gressBox {
              width: 100%;
              height: 10px;
              margin-top: 15px;
              border-radius: 5px;
              background-color: #fff;
              position: relative;
            }
            .gressTras {
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, 0);
              position: absolute;
              top: 0;
              left: 0;
              border-radius: 5px;
              z-index: 20;
              cursor: pointer;
            }
            .gressCon {
              width: 0px;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              border-radius: 5px;
              background-color: #83fefe;
              z-index: 10;
            }
            .gressCircle {
              width: 24px;
              height: 24px;
              background-color: skyblue;
              border-radius: 50%;
              position: absolute;
              top: calc(100% - 17px);
              left: -10px;
              z-index: 21;
              cursor: move;
              .gressCircle—Time {
                position: absolute;
                top: -22px;
                left: calc(50% - 22px);
                font-size: 12px;
              }
            }
            // 进度条
            ::v-deep .el-slider__runway {
              height: 8px;
              .el-slider__bar {
                height: 8px;
              }
            }
          }
          // 时间
          &__time {
            color: #fff;
            // padding: 20px 0;
            width: 120px;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            span {
              cursor: pointer;

              text-shadow: 0px 0px 14px rgba(255, 255, 255, 1);
              &:first-child {
                float: left;
              }
              &:last-child {
                margin-top: 14px;
                float: right;
              }
            }
            &--active {
              color: rgba(131, 254, 254, 0.9) !important;
              text-shadow: 0px 0px 14px rgba(131, 254, 254, 1) !important;
            }
          }
        }
        // 控制栏
        &__Player {
          position: relative;
          width: 100%;
          display: flex;
          box-sizing: border-box;
          // background: #000;
          align-items: center;
          // padding: 34px 58px;
          justify-content: center;
          transform: translateX(-68px);
          .Control_Player_span {
            display: inline-block;
            height: 32px;
            width: 32px;
            margin: 0 24px;
            cursor: pointer;
            // background: transparent;
            &:nth-child(3),
            &:nth-child(5) {
              width: 46px !important;
              height: 46px !important;
            }
          }
          .Control_Player_span_lyric {
            position: relative;
            span {
              display: none;
              position: absolute;
              top: -37px;
              left: calc(50% - 45px);
              padding: 5px 8px;
              width: 70px;

              background-color: rgba(0, 0, 0, 0.3);
              font-size: 14px;
              color: #fff;

              &:before {
                content: "";
                border: 10px solid transparent;
                border-top-color: rgba(0, 0, 0, 0.3);
                position: absolute;
                left: calc(50% - 5px);
                bottom: -18px;
              }
            }

            &:hover span {
              display: inline-block;
            }
          }
          &-listDetails {
            position: absolute;
            right: -200px;
            top: -34px;
            display: flex;

            // visibility: hidden;
            .Control__Player-listDetails_span {
              display: block;
              position: relative;
              width: 26px !important;
              height: 26px !important;
              box-sizing: border-box;
              margin: 0 10px !important;
              cursor: pointer;
              // z-index: 10;
              // &:nth-child(2) {
              //   width: 26px !important;
              //   height: 26px !important;
              // }
              // 音量
              .volumeGress {
                display: none;
                padding: 10px 5px;
                position: absolute;
                bottom: 26px;
                left: calc(50% - 26px);
                // border: 1px solid #ccc;
                .category {
                  width: 30px;
                  height: 30px;
                  padding: 4px;
                  margin-bottom: 10px;
                }
              }
            }
            .Control__Player-listDetails_span_volumeGress:hover .volumeGress {
              display: block;
            }
            .Control__Player-listDetails_span_SongList,
            .Control__Player-listDetails_span_xiazai {
              span {
                display: none;
                position: absolute;
                top: -50px;
                left: calc(50% - 70px);
                padding: 5px 8px;
                width: 120px;

                background-color: rgba(0, 0, 0, 0.5);
                font-size: 14px;
                color: #fff;

                &:before {
                  content: "";
                  border: 10px solid transparent;
                  border-top-color: rgba(0, 0, 0, 0.5);
                  position: absolute;
                  left: calc(50% - 5px);
                  bottom: -18px;
                }
              }
              &:hover span {
                display: inline-block;
              }
            }
            .Control__Player-listDetails_span_xiazai span {
              width: 60px;
              left: calc(50% - 42px);
            }
            .Control__Player-listDetails_span_SongList-position {
              position: absolute;
              top: -320px;
              left: -20px;
              height: 300px;
            }
          }
          .Control__Player_PlayOrder {
            top: 16px;
            font-size: 28px;

            .Control__Player-listDetails_span_LoopPlayback {
              color: rgba(193, 193, 193, 0.8);
              span {
                display: none;
                position: absolute;
                top: -46px;
                left: calc(50% - 62px);
                padding: 5px 8px;
                width: 100px;

                background-color: rgba(0, 0, 0, 0.5);
                font-size: 14px;
                color: #fff;

                &:before {
                  content: "";
                  border: 10px solid transparent;
                  border-top-color: rgba(0, 0, 0, 0.5);
                  position: absolute;
                  left: calc(50% - 5px);
                  bottom: -18px;
                }
              }
              &:hover span {
                display: inline-block;
              }
              &:hover {
                color: #fff;
              }
            }
            .LoopPlaybackActive {
              color: #fff;
              font-weight: bold;
              font-size: 28px;
            }
          }
        }
      }
      @media screen and (max-width: 1200px) {
        &__content {
          position: absolute;
          left: 0;
          height: 100%;
          box-sizing: border-box;
          display: flex;
          // justify-content: center;
          align-items: center;

          // 旋转图片
          &__ImgBox {
            // position: absolute;
            // left: 40px;
            // top: calc(50% - 168px);
            height: 92px;
            width: 92px;
            border-radius: 50%;
            margin-left: 20px;
            border: 5px solid rgba(171, 192, 210, 0.5);
            background-color: bisque;

            img {
              transform-origin: center center;
              border-radius: 50%;
              // animation: ImgBoxRoate linear 10s infinite;
            }
          }
          &__contentName {
            margin-left: 20px;
            width: 310px;
            &-name,
            &-aliasName {
              text-align: right;
              font-size: 20px;
              margin-bottom: 10px;
              color: rgba(255, 255, 255, 0.3);
            }
            &-name {
              text-align: left;
              font-size: 24px;
              color: #fff;
              font-weight: bold;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
        // 进度条
        &__Control {
          position: absolute;
          left: calc(50% - 238px);
          // top: calc(50% - 168px);
          margin: 10px 0;
          padding: 20px 0;
          display: flex;

          &__playprogrebox {
            // // text-align: center;
            // width: 900px;
            min-width: 600px;

            width: 38vw;
            display: flex;
            // min-width: 900px;
            // flex: 6;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            padding: 0 10px;
            &__progress {
              width: 100%;
              height: 100%;
              &-gressBox {
                width: 100%;
                height: 10px;
                margin-top: 15px;
                border-radius: 5px;
                background-color: #fff;
                position: relative;
              }
              .gressTras {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0);
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 5px;
                z-index: 20;
                cursor: pointer;
              }
              .gressCon {
                width: 0px;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 5px;
                background-color: #83fefe;
                z-index: 10;
              }
              .gressCircle {
                width: 24px;
                height: 24px;
                background-color: skyblue;
                border-radius: 50%;
                position: absolute;
                top: calc(100% - 17px);
                left: -12px;
                z-index: 21;
                cursor: pointer;

                .gressCircle—Time {
                  position: absolute;
                  top: -22px;
                  left: calc(50% - 22px);
                  font-size: 12px;
                }
              }
              // 进度条
              ::v-deep .el-slider__runway {
                height: 8px;
                .el-slider__bar {
                  height: 8px;
                }
              }
            }
            // 时间
            &__time {
              color: #fff;
              // padding: 20px 0;
              width: 120px;
              margin-left: 20px;
              display: flex;
              flex-direction: column;
              span {
                cursor: pointer;

                text-shadow: 0px 0px 14px rgba(255, 255, 255, 1);
                &:first-child {
                  float: left;
                }
                &:last-child {
                  margin-top: 14px;
                  float: right;
                }
              }
              &--active {
                color: rgba(131, 254, 254, 0.9) !important;
                text-shadow: 0px 0px 14px rgba(131, 254, 254, 1) !important;
              }
            }
          }
          // 控制栏
          &__Player {
            width: 100%;
            display: flex;
            box-sizing: border-box;
            // background: #000;
            align-items: center;
            // padding: 34px 58px;
            & > span {
              display: inline-block;
              height: 32px;
              width: 32px;
              margin: 0 24px;
              cursor: pointer;
              &:nth-child(3),
              &:nth-child(5) {
                width: 46px !important;
                height: 46px !important;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) {
  .PlaybackControl {
    margin-left: 125px;
    padding: 10px 134px 0 0;
  }
}
</style>
